<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sunny 3.0 — Worthy Sunshine (Production)</title>
<style>
  :root{--bg:#0b0b0f;--fg:#e9f1ff;--muted:#8ca0c3}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;display:grid;place-items:center}
  .wrap{width:min(820px,92vw);text-align:center;padding:22px 0 32px}
  .sun-box{position:relative;display:grid;place-items:center;margin-top:10px}
  .speech{position:absolute;top:-14px;right:0;background:#fff;color:#111;border-radius:12px;padding:14px 16px;font-weight:600;line-height:1.25;max-width:min(360px,72vw);box-shadow:0 10px 25px #0007}
  .speech:after{content:"";position:absolute;left:16px;top:100%;width:0;height:0;border:12px solid transparent;border-top-color:#fff;filter:drop-shadow(0 4px 2px rgba(0,0,0,.35))}
  svg.sun{width:min(420px,80vw);height:auto;display:block;filter:drop-shadow(0 20px 40px #0008)}
  .ray{transform-origin:50% 50%}
  .face{transition:transform .3s ease}
  .nose{cursor:pointer}
  .nose-ring{stroke:#222;stroke-width:2;transition:fill .3s ease}
  .nose-hit{fill:transparent}
  /* Nose colors per state */
  body.idle .nose-ring{fill:#ff4d4d;}     /* red */
  body.armed .nose-ring{fill:#33cc66;}    /* green */
  body.ringing .nose-ring{fill:#ffd45e;}  /* golden yellow */
  .idle .nose{animation:pulse 2.2s ease-in-out infinite}
  .armed .face{transform:scale(1.02)}
  .armed .ray{animation:slow-spin 12s linear infinite}
  .ringing .ray{animation:spin 2.2s linear infinite}
  .ringing .face{animation:flash 1s linear infinite}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
  @keyframes slow-spin{to{transform:rotate(360deg)}}
  @keyframes spin{to{transform:rotate(-360deg)}}
  @keyframes flash{50%{filter:brightness(1.25)}}
  .timer{margin:22px auto 0;width:min(420px,90vw);background:#0f141c;border-radius:14px;padding:12px 14px 16px;box-shadow:inset 0 0 0 1px #1b2330,0 10px 30px #0007}
  .digis{font-family:"Segment7Standard","DS-Digital",monospace;letter-spacing:4px;font-size:clamp(38px,6vw,60px);color:#bfe3ff;text-shadow:0 0 18px #68b7ff55}
  .label{font-size:.95rem;color:#a9b9d6;margin-top:6px;min-height:1.6em}
  .actions{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  button{appearance:none;border:0;padding:12px 16px;border-radius:12px;font-weight:700;cursor:pointer;transition:transform .05s ease,box-shadow .2s ease,background .2s ease;box-shadow:0 8px 22px #0006}
  .ghost{background:#1a2232;color:#d8e7ff}
  .ok{background:linear-gradient(180deg,#78f0be,#3bd792);color:#062417}
  .danger{background:linear-gradient(180deg,#ff9d9d,#ff6b6b);color:#2b0505}
  button:active{transform:translateY(1px)}
</style>
</head>
<body class="idle">
<div class="wrap">
  <div class="sun-box">
    <div class="speech" id="speech">Push my Nose! I’ll ring when the sun shines…</div>

    <!-- Sun SVG -->
    <svg class="sun" viewBox="0 0 400 400" role="img" aria-labelledby="title desc">
      <title id="title">Sunny the Sun</title>
      <desc id="desc">A smiling cartoon sun with a tappable nose to arm the sunshine alarm.</desc>
      <g class="ray" fill="url(#rayGrad)" stroke="#cc7b00" stroke-width="2">
        <path d="M200 10 L214 72 L186 72 Z"/><path d="M307 33 L287 90 L263 74 Z"/><path d="M367 120 L316 147 L312 118 Z"/><path d="M388 230 L326 220 L337 194 Z"/><path d="M360 320 L302 286 L322 268 Z"/><path d="M290 374 L262 322 L290 322 Z"/><path d="M200 390 L214 328 L186 328 Z"/><path d="M110 374 L110 322 L138 322 Z"/><path d="M40 320 L78 268 L98 286 Z"/><path d="M12 230 L63 194 L74 220 Z"/><path d="M33 120 L88 118 L84 147 Z"/><path d="M93 33 L137 74 L113 90 Z"/>
      </g>
      <defs>
        <radialGradient id="faceGrad" cx="35%" cy="30%">
          <stop offset="0%" stop-color="#fff6cf"/><stop offset="60%" stop-color="#ffd45e"/><stop offset="100%" stop-color="#ffb647"/>
        </radialGradient>
        <linearGradient id="rayGrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stop-color="#ffd55f"/><stop offset="100%" stop-color="#ffad3f"/>
        </linearGradient>
      </defs>
      <g class="face">
        <circle cx="200" cy="200" r="150" fill="url(#faceGrad)" stroke="#cc7b00" stroke-width="3"/>
        <g fill="#2b1600"><ellipse cx="160" cy="180" rx="18" ry="24"/><ellipse cx="240" cy="180" rx="18" ry="24"/></g>
        <g fill="#fff"><circle cx="168" cy="170" r="7"/><circle cx="248" cy="170" r="7"/></g>
        <path d="M145 230 Q200 265 255 230" fill="none" stroke="#7a3a00" stroke-width="8" stroke-linecap="round"/>
        <g class="nose" tabindex="0" aria-label="Sunny's nose. Press to arm the sunshine alarm." role="button">
          <circle class="nose-ring" cx="200" cy="205" r="14"/><circle class="nose-hit" cx="200" cy="205" r="24"/>
        </g>
      </g>
    </svg>
  </div>

  <div class="timer" aria-live="polite">
    <div class="digis" id="clock">--:--:--</div>
    <div class="label" id="label">Idle — tap the nose to arm Sunny.</div>
  </div>

  <div class="actions">
    <button class="ghost" id="cancel" hidden>Cancel</button>
    <button class="ok" id="snooze" hidden>⏱ Snooze 5 min</button>
    <button class="danger" id="stop" hidden>⏹ Stop</button>
  </div>
</div>

<script>
(() => {
  // ======= PRODUCTION CONFIG =======
  const MIN_WINDOW_MINUTES = 30;   // window must be >= 30 minutes
  const CLOUD_MAX = 30;            // %
  const SWR_MIN = 120;             // W/m² brightness
  const COOLDOWN_MINUTES = 120;    // no re-ring for 2 hours after a ring
  const PRECHECK_MINUTES = 5;      // re-validate 5 minutes before ring

  // ======= Elements & State =======
  const el = {
    body: document.body,
    speech: document.getElementById('speech'),
    nose: document.querySelector('.nose'),
    clock: document.getElementById('clock'),
    label: document.getElementById('label'),
    cancel: document.getElementById('cancel'),
    snooze: document.getElementById('snooze'),
    stop: document.getElementById('stop'),
  };
  const State = Object.freeze({ IDLE:'idle', ARMED:'armed', RINGING:'ringing' });
  let state = State.IDLE;
  let tickTimer, refreshTimer, nextTargetTs, audioCtx, ringInterval;
  let lastRingTs = 0;

  // ======= Utils =======
  const fmt2 = n => String(n).padStart(2,'0');
  const formatCountdown = ms => {
    if(ms <= 0) return "00:00:00";
    const total = Math.floor(ms/1000);
    const h = Math.floor(total/3600);
    const m = Math.floor((total%3600)/60);
    const s = total%60;
    return `${fmt2(h)}:${fmt2(m)}:${fmt2(s)}`;
  };
  const nowTs = () => Date.now();

  function setState(s){
    state = s;
    el.body.classList.remove('idle','armed','ringing');
    el.body.classList.add(s);

    if(s === State.IDLE){
      el.label.textContent = "Idle — tap the nose to arm Sunny.";
      el.speech.textContent = "Push my Nose! I’ll ring when the sun shines…";
      el.clock.textContent = "--:--:--";
      el.cancel.hidden = true; el.snooze.hidden = true; el.stop.hidden = true;
      stopRinging(); nextTargetTs = null; clearInterval(refreshTimer);
    }

    if(s === State.ARMED){
      el.label.textContent = "Armed — countdown running.";
      el.speech.textContent = "I’m watching the sky… countdown is running.";
      el.cancel.hidden = false; el.snooze.hidden = true; el.stop.hidden = true;
    }

    if(s === State.RINGING){
      el.label.textContent = "Sun’s out! Time to shine ☀️";
      el.speech.textContent = "The sun is shining! Time to get up ☀️";
      el.cancel.hidden = true; el.snooze.hidden = false; el.stop.hidden = false;
      el.clock.textContent = "00:00:00";
      startRinging();
    }
  }

  function startTick(){
    if(tickTimer) clearInterval(tickTimer);
    let didPrecheck = false;
    tickTimer = setInterval(async ()=>{
      if(state !== State.ARMED || !nextTargetTs) return;
      const left = nextTargetTs - nowTs();
      el.clock.textContent = formatCountdown(left);

      // T−5 min precheck (once)
      if(!didPrecheck && left <= PRECHECK_MINUTES*60*1000 && left > 0){
        didPrecheck = true;
        await refreshForecast(); // adjust/cancel if window vanished
      }

      // Time to ring?
      if(left <= 0){
        const cooldownTo = lastRingTs + COOLDOWN_MINUTES*60*1000;
        if(nowTs() >= cooldownTo){
          lastRingTs = nowTs();
          setState(State.RINGING);
        } else {
          // still cooling down — look for the next window
          await refreshForecast();
        }
      }
    }, 500);
  }

  // ======= Audio =======
  function ensureAudio(){ if(!audioCtx) audioCtx = new (window.AudioContext||window.webkitAudioContext)(); }
  function chime(){
    ensureAudio(); if(!audioCtx) return;
    const t = audioCtx.currentTime;
    [523.25,659.25,784.00].forEach((f,i)=>{
      const o=audioCtx.createOscillator(), g=audioCtx.createGain();
      o.type='sine'; o.frequency.value=f;
      g.gain.setValueAtTime(0, t);
      g.gain.linearRampToValueAtTime(0.14, t+0.03+i*0.02);
      g.gain.exponentialRampToValueAtTime(0.0001, t+0.7+i*0.02);
      o.connect(g).connect(audioCtx.destination);
      o.start(t+i*0.02); o.stop(t+0.9+i*0.02);
    });
  }
  function startRinging(){ stopRinging(); chime(); ringInterval = setInterval(chime, 1200); }
  function stopRinging(){ if(ringInterval) clearInterval(ringInterval); ringInterval = null; }

  // ======= Location & Forecast =======
  async function getCoords(){
    return new Promise((resolve)=>{
      if(!navigator.geolocation){ resolve({lat:47.446,lon:12.392}); return; } // fallback
      navigator.geolocation.getCurrentPosition(
        pos=>resolve({lat:pos.coords.latitude,lon:pos.coords.longitude}),
        err=>{ console.warn("Geo fail, fallback", err); resolve({lat:47.446,lon:12.392}); },
        {timeout:10000}
      );
    });
  }

  async function fetchForecast(lat,lon){
    const base='https://api.open-meteo.com/v1/forecast';
    const params=new URLSearchParams({
      latitude:lat, longitude:lon, timezone:'auto',
      // minutely: no guaranteed is_day → use SWR/shine as proxy
      'minutely_15':'shortwave_radiation,precipitation,cloud_cover,sunshine_duration',
      // hourly has is_day
      hourly:'is_day,cloud_cover,precipitation,shortwave_radiation',
      forecast_days:'7'
    });
    const res=await fetch(`${base}?${params.toString()}`,{cache:'no-store'});
    if(!res.ok) throw new Error(`Forecast HTTP ${res.status}`);
    return res.json();
  }

  function meetsCriteriaMinutely(cc, pr, swr){
    const ccOk  = (cc ?? 100) <= CLOUD_MAX;
    const prOk  = (pr ?? 1) <= 0;
    const swrOk = (swr ?? 0) >= SWR_MIN; // also implies daylight
    return ccOk && prOk && swrOk;
  }
  function meetsCriteriaHourly(day, cc, pr, swr){
    const dayOk = day === 1;
    const ccOk  = (cc ?? 100) <= CLOUD_MAX;
    const prOk  = (pr ?? 1) <= 0;
    const swrOk = swr == null ? true : swr >= SWR_MIN;
    return dayOk && ccOk && prOk && swrOk;
  }

  function findNextSunnyWindow(forecast, startAfterTs){
    const needSlots = Math.ceil(MIN_WINDOW_MINUTES / 15); // 2 for 30 min

    // 1) 15-minute scan: require N consecutive good slots
    const m = forecast.minutely_15;
    if(m?.time?.length){
      for(let i=0; i <= m.time.length - needSlots; i++){
        const t0 = new Date(m.time[i]).getTime();
        if(t0 <= startAfterTs) continue;

        let okRun = true;
        for(let k=0; k<needSlots; k++){
          const idx = i+k;
          const ok = meetsCriteriaMinutely(
            m.cloud_cover?.[idx],
            m.precipitation?.[idx],
            m.shortwave_radiation?.[idx]
          );
          if(!ok){ okRun = false; break; }
        }
        if(okRun) return { t: t0, source: 'minutely' };
      }
    }

    // 2) Hourly fallback (>= 60 min)
    const h = forecast.hourly;
    if(h?.time?.length){
      for(let i=0; i<h.time.length; i++){
        const th = new Date(h.time[i]).getTime();
        if(th <= startAfterTs) continue;
        const ok = meetsCriteriaHourly(
          h.is_day?.[i], h.cloud_cover?.[i],
          h.precipitation?.[i], h.shortwave_radiation?.[i]
        );
        if(ok) return { t: th, source: 'hourly' };
      }
    }

    return null;
  }

  async function refreshForecast(){
    try{
      const {lat,lon} = await getCoords();
      const data = await fetchForecast(lat,lon);
      const cooldownUntil = lastRingTs + COOLDOWN_MINUTES*60*1000;
      const startAfter = Math.max(nowTs(), cooldownUntil);
      const hit = findNextSunnyWindow(data, startAfter);

      if(hit){
        nextTargetTs = hit.t;
        el.label.textContent = `Armed — aiming for ≈ ${new Date(hit.t).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'})} (${hit.source})`;
        el.clock.textContent = formatCountdown(nextTargetTs - nowTs()); // immediate paint
      } else {
        nextTargetTs = null;
        el.label.textContent = "Armed — no worthy sunny window found yet. I’ll keep checking.";
        el.clock.textContent = "--:--:--";
      }
    } catch(e){
      console.error(e);
      el.label.textContent = "Armed — forecast unavailable.";
    }
  }

  function scheduleAutoRefresh(){
    if(refreshTimer) clearInterval(refreshTimer);
    refreshTimer = setInterval(()=>{
      if(state !== State.ARMED) return;
      // If target < 2h, refresh more aggressively
      if(nextTargetTs && (nextTargetTs - nowTs()) < 2*3600*1000){
        refreshForecast();
      } else if(!nextTargetTs){
        refreshForecast();
      }
    }, 30*60*1000); // every 30 minutes
  }

  // ======= Actions =======
  function arm(){
    if(state === State.ARMED) return;
    setState(State.ARMED);
    refreshForecast();
    scheduleAutoRefresh();
  }

  el.nose.addEventListener('click', arm);
  el.nose.addEventListener('keydown', e=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); arm(); }});
  el.cancel.addEventListener('click', ()=> setState(State.IDLE));
  el.stop.addEventListener('click', ()=> setState(State.IDLE));
  el.snooze.addEventListener('click', ()=>{
    setState(State.ARMED);
    el.label.textContent = "Snoozed — I’ll check again soon.";
    refreshForecast();
  });

  // Start UI loop
  startTick();
})();
</script>
</body>
</html>